<template>
  <div class="main">
    <!-- 筛选框 -->
    <van-popup v-model="show" position="bottom" :style="{ height: '40%' }">
      <van-picker title="筛选" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="onCancel"
        @change="onChange" />
    </van-popup>
    <div class="listTop">
      <div class="user-name">黄啸</div>
      <span class="user-label">地市系统管理员</span>
    </div>
    <div class="mainList">
      <div class="part1">
        <div class="city-name">哈尔滨</div>
        <div class="content-part1">
          <div class="content1">
            <div class="f-content">
              <div class="title1">客户份额<span>{{ unit }}</span></div>
              <div class="value1">472</div>
            </div>
            <div class="r-line"></div>
            <div class="f-content">
              <div class="title1">宽带份额<span>{{ unit }}</span></div>
              <div class="value1">482</div>
            </div>
            <div class="r-line"></div>
            <div class="f-content">
              <div class="title1">渠道份额<span>{{ unit }}</span></div>
              <div class="value1">0</div>
            </div>
          </div>
          <div class="content1">
            <div class="f-content">
              <div class="title1">网格经理<span>{{ unit }}</span></div>
              <div class="value1">9</div>
            </div>
            <div class="r-line"></div>
            <div class="f-content">
              <div class="title1">自营厅主任<span>户</span></div>
              <div class="value1">82</div>
            </div>
            <div class="r-line"></div>
            <div class="f-content">
              <div class="title1">自营厅营业员<span>{{ unit }}</span></div>
              <div class="value1">0</div>
            </div>
          </div>
          <div class="content1">
            <div class="f-content">
              <div class="title1">直售渠道<span>{{ unit }}</span></div>
              <div class="value1">303</div>
            </div>
            <div class="r-line"></div>
            <div class="f-content">
              <div class="title1">自有渠道<span>{{ unit }}</span></div>
              <div class="value1">82</div>
            </div>
            <div class="r-line"></div>
            <div class="f-content">
              <div class="title1">泛渠道<span>{{ unit }}</span></div>
              <div class="value1">60</div>
            </div>
          </div>
        </div>
      </div>

      <div class="task-part">
        <i class="line"></i>任务专区
      </div>
      <div class="task-zone">
        <div class="task-zone-part1">
          <img src="@/assets/img/yjsp.png" />
          <div class="xcgl" @click="jumpTo">
            <img src="@/assets/img/more.png" style="position: absolute;right: 10px;width: 20px;height: 20px;" />
            <div class="title">新春攻坚-沿街商铺</div>
            <div class="mpls" style="margin-top: 10px;">
              <span>攻坚清单10个</span>
              <span>摸排率50%</span>
              <span>宽带渗透率60%</span>
            </div>
            <div class="mpls" style="margin-top: 5px;">
              <span>资源覆盖率 10%</span>
              <span>异网宽带商铺(100家,50%)</span>
            </div>
          </div>
        </div>
        <div class="task-zone-part1" style="margin-top: 10px;">
          <img src="@/assets/img/xq.png" />
          <div class="xcgl" @click="jumpToXQ">
            <img src="@/assets/img/more.png" style="position: absolute;right: 10px;width: 20px;height: 20px;" />
            <div class="title">新春攻坚-小区</div>
            <div class="mpls" style="margin-top: 10px;">
              <span>攻坚清单 20个</span>
              <span>摸排率 40%</span>
              <span>任务完成率 40%</span>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      unit: "(户)",
      act: 1,
      show: false,
      waitNum: 0,
      list: [],
      loading: false,
      finished: false,
      start: 0,
      columns: [{ text: "全部", value: "" }],
      refreshing: false,
      size: 5,
    };
  },

  mounted() {
    if (this.getQuery("loginId")) {
      window.sessionStorage.setItem("loginId", this.getQuery("loginId"));
    }
    this.list = [];
  },
  methods: {
    ...mapActions({
      getApprovalActivity: "pageApi/getApprovalActivity",
      listProcess: "pageApi/listProcess",
    }),
    tabAct(index) {
      this.act = index;
      this.start = 0;
      this.list = [];
      this.onLoad();
    },
    searchPage() {
      this.start = 0;
      this.list = [];
      this.onLoad();
    },
    //截取浏览器地址
    getQuery(name) {
      let url = document.location.toString();
      let arrObj = url.split("?");
      if (arrObj.length > 1) {
        let uri = arrObj[1];
        let arrPara = uri.split("&");
        let arr;
        for (var i = 0; i < arrPara.length; i++) {
          arr = arrPara[i].split("=");
          if (arr != null && arr[0] == name) {
            return arr[1];
          }
        }
        return "";
      } else {
        return "";
      }
    },
    reBack() {
      window.history.go(-1);
    },
    jumpTo(item) {
      const {
        ID: taskId,
      } = item || {};
      this.$router.push({
        name: "streetShops",
        query: {
          type: "home",
        },
      });
    },
    jumpToXQ(item) {
      const {
        ID: taskId,
      } = item || {};
      this.$router.push({
        name: "community",
        query: {
          type: this.act,
        },
      });
    },
    onRefresh() {
      this.start = 0;
      this.list = [];
      this.onLoad();
    },
    onConfirm(value) {
      this.start = 0;
      this.modelKey = value.value;
      this.list = [];
      this.onLoad();
      this.show = false;
    },
    onCancel(value) { },
    onChange(value) { },
  },
};
</script>

<style lang="scss" scoped type='text/css'>
.main {
  background-color: #F8F9FD;
  overflow: hidden;
}

button {
  border: none;
}

.listTop {
  height: 36rem;
  background: linear-gradient(180deg, #4371FB 0%, #84A1FC 100%);
  background-size: 100% 100%;
  padding-top: 8rem;
  padding-left: 20px;

  .user-name {
    font-size: 4rem;
    color: #fff;
    margin-bottom: 10px;
  }

  .user-label {
    padding: 5px 10px;
    background: #96AEFB;
    border-radius: 4px;
    font-size: 2rem;
    color: #fff;

  }

}


.mainList {
  width: calc(100% - 20px);
  height: calc(100vh - 28rem);
  border-radius: 3rem 3rem 0 0;
  // background: linear-gradient(180deg, #FFFFFF 0%, #F3F3F3 100%);
  // margin-top: -8rem;
  margin: -8rem 10px 0 10px;
  position: relative;

  .part1 {
    width: 100%;
    height: 42%;
    background: #F1F5FF;
    border-radius: 8px;
    position: absolute;
    top: -6rem;

    .city-name {
      font-size: 3.5rem;
      color: #000;
      font-weight: bold;
      padding: 10px;
    }

    .content-part1 {
      width: calc(100% - 40px);
      height: calc(100% - 5rem);
      margin: 0 20px;
      display: flex;
      flex-direction: column;

      .content1 {
        width: 100%;
        height: 30%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;

        .r-line {
          width: 1px;
          height: 40%;
          margin-top: 2rem;
          background: #e0e0e0;
        }

        .f-content {
          display: flex;
          align-items: center;
          flex-direction: column;
          width: 33%;
        }

        .title1 {
          color: #333;
          font-size: 2.6rem;

          span {
            font-size: 2rem;
            margin-left: 2px;
          }
        }

        .value1 {
          color: #000;
          font-size: 4rem;
          font-weight: bold;
          margin-top: 10px;
        }
      }
    }
  }

  .task-part {
    position: absolute;
    top: 40%;
    font-size: 3rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-weight: bold;

    .line {
      width: 6px;
      height: 15px;
      background: #4975FB;
      border-radius: 5px;
      display: block;
      margin-right: 5px;
    }
  }

  .task-zone {
    width: 100%;
    height: 40%;
    position: absolute;
    top: 45%;
    margin-bottom: 10px;


    &-part1 {
      width: 100%;
      height: 35%;
      background: #FFFFFF;
      border-radius: 8px;
      display: flex;
      flex-direction: row;
      align-items: center;
      padding-left: 10px;

      img {
        width: 40px;
        height: 40px;
      }
    }

    .xcgl {
      display: flex;
      flex-direction: column;
      color: #000;
      padding-left: 10px;
      width: calc(100% - 50px);
      position: relative;

      .title {
        font-size: 2.6rem;
      }

      .mpls {
        width: 100%;
        font-size: 2.6rem;
        display: flex;
        justify-content: space-between;

      }
    }

  }


}
</style>